<template>
    <div class="TvLayout">
        <div v-hiddentop class="top">
            <top-box></top-box>
        </div>
        <div class="swiperBox">
            <swiper-box></swiper-box>
            <div class="swiperMask1"></div>
        </div>
        <div class="kindsBox">
            <kinds-box :data="data['hotPlay']" ></kinds-box>
            <kinds-box :data="data['FG']"></kinds-box>
            <kinds-box :data="data['area']"></kinds-box>
            <kinds-box :data="data['hotSearch']"></kinds-box>
        </div>
        <div class="defaultBox">
            <div>视频处</div>
            <default-right-box :data="data['defaultVideo'].list"></default-right-box>
        </div>
        <div class="RecomBox">
            <recom-box :data="data['hotPlayRank']"></recom-box>
            <recom-card :data="data['card'].list"></recom-card>
            <recom-box :data="data['higScore']"></recom-box>
        </div>
        <div class="moreBox">
            <div>更多推荐</div>
            <more-box :data="list.moreList"></more-box>
        </div>
        <div class="footer" v-loadata>
            <footer-Box></footer-Box>
        </div>

        <Transition name="showLoginPopup">
            <div v-if="store.state.isShowLoginPopup" class="showBox">
                <login-popup></login-popup>
            </div>
        </Transition>
    </div> 
</template>

<script lang="ts" setup>
import { reactive,onBeforeMount,ref } from 'vue'
import { swiperBox,kindsBox,topBox,defaultRightBox,recomBox,recomCard,moreBox,footerBox,loginPopup } from './index'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { get } from '@/http/axios'
import { byRouterGetTVdata } from '@/hooks/TVdata'

const store = useStore()
const router = useRouter()
const data =  ref(byRouterGetTVdata(router.currentRoute.value.name as string))

onBeforeMount(()=>{
    getMore()
})

let list = reactive({
    moreList:[]
})
let num = ref<number>(0)
function getMore(){
    get('/pgc/page/web/feed?name=tv&coursor=' + num.value + '&new_cursor_status=true')
    .then((res:any) =>{
        list.moreList = [...list.moreList,...res.data.items]
        num.value += 14
        console.log('加载更多',list.moreList);
    }).catch(res => {
        alert('加载更多失败了')
    })
}
const vLoadata = {
    mounted: (el:HTMLElement) => {    
        const observer = new IntersectionObserver((enr)=>{
            if (enr[0].intersectionRatio > 0){
                let timer = setTimeout(() => {
                    clearTimeout(timer)
                    getMore()
                },500)

            }
        })
        observer.observe(el);
    }
}
</script>

<style lang="scss" scoped>
@import url(../../../assets/css/LoginPopup.scss);
.TvLayout{
    position: absolute;
    top: 0;
    width: 100%;
    min-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 60px;
    background-color: black;
    z-index: 99;

}
.top{
    position: absolute;
    top: 0;
    width: 100%;
}
.swiperBox{
    position: relative;
    width: 100%;
    z-index: -1;
}
.swiperMask1{
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    background: linear-gradient(to top,rgb(0, 0, 0),rgb(255, 255, 255,0) 95%);
}
.kindsBox{
    margin-top: -150px;
    width: 90%;
    display: flex;
    justify-content: start;
    gap: 150px;
}
.defaultBox{
    width: 90%;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    & div:nth-child(1){
        color: white;
        font-size: 40px;
        width: calc(40% - 30px);
        border: 1px solid;
        box-sizing: border-box;
    }
    & div:nth-child(2){
        width: 60%;
    }
}
.RecomBox{
    width: 90%;
    display: flex;
    flex-direction: column;
}
.moreBox{
    width: 90%;
    & div:nth-child(1){
        font-size: 24px;
        color: white;
        text-align: left;
        margin-bottom: 20px;
    }
}
.footer{
    width: 100%;
}
</style>